<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form ref="form" :model="detail" label-width="100px" class="form">
		  
        <el-form-item label="小区名称">
          <el-input v-model="detail.name" />
        </el-form-item>
        <el-form-item label="平均房价">
          <el-input v-model="detail.unitPrice" />
        </el-form-item>
        <el-form-item label="建筑年代">
          <el-input v-model="detail.completionYear" />
        </el-form-item>
        <el-form-item label="总户数">
          <el-input v-model="detail.totalFamily" />
        </el-form-item>
        <el-form-item label="在售房源">
          <el-input v-model="detail.onSale" />
        </el-form-item>
        <el-form-item label="总楼栋数">
          <el-input v-model="detail.totalHouse" />
        </el-form-item>
        <el-form-item label="产权描述">
          <el-input v-model="detail.propertyRight" />
        </el-form-item>
        <el-form-item label="物业费">
          <el-input v-model="detail.propertyFee" placeholder="元/m²/月" />

        </el-form-item>
        <el-form-item label="绿化率">
          <el-input v-model="detail.greeningRate" />
        </el-form-item>
        <el-form-item label="建筑类型">
          <el-select v-model="detail.houseType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_house_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小区介绍">
          <el-input
            v-model="detail.remark"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
		<el-form-item label="停车位">
		  <el-input v-model="detail.carNum" />
		</el-form-item>
		<el-form-item label="开发商">
		  <el-input v-model="detail.investor" />
		</el-form-item>
		<el-form-item label="物业公司">
		  <el-input v-model="detail.propertyCompany" />
		</el-form-item>
		<el-form-item label="权属类型">
		  <el-input v-model="detail.ownershipType" />
		</el-form-item>
		<el-form-item label="在租房源">
		  <el-input v-model="detail.onRenting" />
		</el-form-item>
        <el-form-item v-if="$route.query.item" label="小区图片">
          <div class="picList">
            <div v-for="(item,index) in resourcesList" class="item">
              <img class="pic" :src="item.pictureUrl" alt>
<!--              <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" />-->
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
<!--          <el-button @click="cancel">返回</el-button>-->
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
  import { resourcesAdd, resourcesList, resourcesDelete, typeListSon, residentialAdd, residentialUpdate } from '@/api/api'
  export default {
    data() {
      return {
        resourcesAdd: resourcesAdd,
        resourcesList: [],
        fileList: [],
        buildingTypeOptions: [],
        postIdOptions: [
          {
            value: 1,
            label: 'APP端'
          },
          {
            value: 2,
            label: 'PC端'
          }],
        detail: {
          'buildingType': '',
          'completionYear': '',
          'developersName': '',
          'greeningRate': '',
          'name': '',
          'onSale': 0,
          'propertyFee': 0,
          'propertyRight': '',
          'remark': '',
          'totalFamily': 0,
          'totalHouse': 0,
          'unitPrice': 0,
		  'carNum':0,
		  'investor':0,
		  'propertyCompany':0,
		  'ownershipType':0,
		  'onRenting':0
        }
      }
    },
    created() {
      if (this.$route.query.item) {
        this.detail = JSON.parse(this.$route.query.item)
      }
      resourcesList(this.detail.id).then(({ data }) => {
        this.resourcesList = data
      })
    },
    methods: {
      getMb() {
        // 建筑类型
        typeListSon('8e612c9d4a0dc5f7c3ef76df6e394091').then(({ data }) => {
          this.buildingTypeOptions = data
        })
      },
      handleRemove(item, index) {
        resourcesDelete([item.id]).then(data => {
          Is.tip('删除成功')
          this.resourcesList.splice(index, 1)
        })
      },
      // 上传图片之前的验证
      handleUpload() {
      },
      // 上传成功之后的回调
      handleSuccess(res) {
        if (res.code === 200) {
          resourcesAdd({
            dataId: this.detail.id,
            resourcesList: [{ pictureUrl: res.data, type: 'hou_house_xiaoqu_show_pictures' }]
          }).then(data => {
            Is.tip('上传成功')
            resourcesList(this.detail.id).then(({ data }) => {
              this.resourcesList = data
            })
          })
        }
      },
      // 添加/编辑
      submit() {
        // 验证不通过则不提交
        if (!this.vertify()) {
          return false
        }
        if (this.$route.query.item) {
          // 编辑
          residentialUpdate(this.detail).then(data => {
            Is.tip('编辑成功', 2000, 'success')
            this.$router.back()
          })
        } else {
          // 新增
          residentialAdd(this.detail).then(data => {
            Is.tip('添加成功', 2000, 'success')
            this.$router.back()
          })
        }
      },
      // 返回
      cancel() {
        this.$router.back()
      },
      vertify() {
        // if (Is.empty(this.detail.title)) {
        //   Is.tip('请输入标题')
        //   return false
        // }
        return true
      }
    }}
</script>
